<html>

<head>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        .noedit {
            color: #666;
        }
        
        body {
            color: black;
            background-color: white;
        }
    </style>
</head>

<body id="body_element">
    <div>
        <div class="toolbar">
            <div class="center-panel">
                <label class="fancy-checkbox">
                    <input id="export-as-markdown" name="zoom-mode" type="radio" value="fixed" />
                    <div class="button">Export markdown</div>
                </label>
                <label class="fancy-checkbox">
                    <input id="export-as-html" name="zoom-mode" type="radio" value="fit" />
                    <div class="button">Export HTML</div>
                </label>
                <label class="fancy-checkbox">
                    <input id="export-as-image" name="zoom-mode" type="radio" value="fit" />
                    <div class="button">Export as SVG</div>
                </label>
            </div>
        </div>
</body>

<script>
    const vscode = acquireVsCodeApi();
    document.getElementById("export-as-markdown").onclick = function() {
        export_message("markdown")
    };
    document.getElementById("export-as-html").onclick = function() {
        export_message("html")
    };
    document.getElementById("export-as-image").onclick = function() {
        export_message("image")
    };

    function export_message(message) {
        vscode.postMessage({
            command: 'export',
            text: message
        })
    }
</script>

</html>